<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Gallery 4 Column</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="scripts/ie9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/style.css"> 
<link rel="stylesheet" href="stylesheets/responsive.css"> 
<link rel="stylesheet" href="stylesheets/prettyPhoto.css">
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/jquery.prettyPhoto.js"></script>
<script src="scripts/jquery.blackandwhite.min.js"></script>
<script src="scripts/js_func.js"></script>
<script>
$(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_rounded'});
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        responsive:true,
        invertHoverEffect:false
    });
})
</script>
</head>
<body>
<div class="wraper">
 <header class="header">
  <a class="logo" href="index.html">construct</a>
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="index.html">Home</a>
     <ul>
      <li><a href="index2.html">Home Version 2</a></li>
      <li><a href="index3.html">Home Version 3</a></li>
      <li><a href="index4.html">Home Version 4</a></li>
      <li><a href="index5.html">Home Version 5</a></li>
      <li><a href="index6.html">Home Version 6</a></li>
      <li><a href="index7.html">Home Version 7</a></li>
      <li><a href="index8.html">Home Version 8</a></li>
     </ul>
    </li>
    
    <li><a href="about.html">Pages</a>
     <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="team.html">Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="process.html">Process</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="left_nav.html">Left Nav</a></li>
      <li><a href="left_sidebar.html">Left Sidebar</a></li>
      <li><a href="right_nav.html">Right Nav</a></li>
      <li><a href="right_sidebar.html">Right Sidebar</a></li>
      <li><a href="full_width.html">Full Width</a></li>
     </ul>
    </li>
    <li><a href="short_text.html">Portfolio</a>
     <ul>
      <li><a href="short_text.html">Short Text Layout</a>
       <ul>
        <li><a href="short_text.html">1 Column</a></li>
        <li><a href="short_text2.html">2 Column</a></li>
        <li><a href="short_text3.html">3 Column</a></li>
        <li><a href="short_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="long_text.html">Long Text Layout</a>
       <ul>
        <li><a href="long_text_wide.html">1 Column Wide</a></li>
        <li><a href="long_text.html">1 Column</a></li>
        <li><a href="long_text2.html">2 Column</a></li>
        <li><a href="long_text3.html">3 Column</a></li>
        <li><a href="long_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="filtered.html">Filtered Layout</a>
       <ul>
        <li><a href="filtered.html">1 Column</a></li>
        <li><a href="filtered2.html">2 Column</a></li>
        <li><a href="filtered3.html">3 Column</a></li>
        <li><a href="filtered4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="right_sidebar.html">Right Sidebar</a>
       <ul>
        <li><a href="right_sidebar.html">1 Column</a></li>
        <li><a href="right_sidebar2.html">2 Column</a></li>
        <li><a href="right_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="left_sidebar.html">Left Sidebar</a>
       <ul>
        <li><a href="left_sidebar.html">1 Column</a></li>
        <li><a href="left_sidebar2.html">2 Column</a></li>
        <li><a href="left_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="gallery.html">Gallery Style</a>
       <ul>
        <li><a href="gallery.html">1 Column</a></li>
        <li><a href="gallery2.html">2 Column</a></li>
        <li><a href="gallery3.html">3 Column</a></li>
        <li><a href="gallery4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="single_full.html">Portfolio Single Post</a>
       <ul>
        <li><a href="single_full.html">Full Width</a></li>
        <li><a href="single_right.html">Right Sidebar</a></li>
        <li><a href="single_left.html">Left Sidebar</a></li>
       </ul>
      </li>
     </ul>    
    </li>
    <li><a href="blog_post.html">Blog</a>
     <ul>
      <li><a href="blog_full_width.html">Full Width</a></li>
      <li><a href="blog_large.html">Large Image No Sidebar</a></li>
      <li><a href="blog_large_sidebar.html">Large Image With Sidebar</a></li>
      <li><a href="blog_medium_sidebar.html">Medium Image Right Sidebar</a></li>
     </ul>
    </li>
    <li><a href="shortcodes_typography.html">Shortcodes</a>
     <ul>
      <li><a href="shortcodes_typography.html">Typography</a></li>
      <li><a href="shortcodes_buttons_icons.html">Buttons</a></li>
      <li><a href="shortcodes_google_maps.html">Maps</a></li>
      <li><a href="shortcodes_content_sliders.html">Sliders</a></li>
      <li><a href="shortcodes_videos.html">Videos</a></li>
      <li><a href="shortcodes_pricing_tables.html">Tables</a></li>
      <li><a href="shortcodes_alerts_boxes.html">Boxes</a></li>
      <li><a href="shortcodes_accordions_tabs_toggles.html">Tabs</a></li>
     </ul>
    </li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div> 

<div class="content_block">
 <!-- top_title -->
 <div class="top_title">
  <div class="wraper">
   <h2>Our Work <span>This is our favorite part of the site, our showcase!</span></h2>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Gallery Style</a></li>
    <li>Four Column</li>
   </ul>
  </div>
 </div>
 <!-- /top_title -->
 <div class="wraper">
  <!-- gallery_list 4 Column -->
  <div class="gallery_list gallery_list_col_4 gallery">
   <ul>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_01.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_23.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_02.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_24.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_03.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_25.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_04.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_26.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_05.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_27.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_06.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_28.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_07.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_29.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_08.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_30.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_09.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_31.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_10.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_32.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_01.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_33.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_02.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_34.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_03.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_35.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_04.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_36.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_05.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_37.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_06.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_38.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_07.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_23.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_08.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_24.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_09.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_25.jpg" width="202" height="126" alt="" /></a></div></li>
    <li><div class="img bwWrapper"><a href="images/portfolio/portfolio_10.jpg" rel="prettyPhoto[gallery2]"><img src="images/portfolio/portfolio_26.jpg" width="202" height="126" alt="" /></a></div></li>
   </ul>
  </div>
  <!-- pager_nav -->
  <div class="pager_nav">
   <a href="#">1</a><span>2</span><a href="#">3</a><a href="#">4</a><a href="#">5</a>
   <a href="#" class="bx-prev">prev</a><a href="#" class="bx-next">next</a>
  </div>
  <!-- /pager_nav -->
  <!-- /gallery_list 4 Column -->
 </div>
</div>

<!-- footer -->
<!-- social block -->
<div class="social_block">
 <div class="wraper">
  <p>Stay connected with us in your favorite flavor!</p>
  <ul>
   <li class="facebook"><a href="#">Facebook</a></li>
   <li class="twitter"><a href="#">Twitter</a></li>
   <li class="linkedin"><a href="#">LinkedIn</a></li>
   <li class="rss"><a href="#">RSS</a></li>
   <li class="dribbble"><a href="#">Dribbble</a></li>
   <li class="google"><a href="#">Google+</a></li>
  </ul>
 </div>
</div>
<!-- /social block -->

<div class="footer">
 <footer>
  <!-- bottom about -->
  <div class="bottom_about">
   <p><img src="images/logo.png" alt="" /></p>
   <p>At vero eos et accusaus et iusto unir un dignissimos ducimus quirds siter ters pi blranditiis praesentium amets voluptatum un deleniti atque corrupti quosdirs dolores etra quasir moltias unstw excepturi sinte amets occaecatires.</p>
  </div>
  <!-- /bottom about -->
  <!-- recent tweets -->
  <div class="recent_tweets">
   <h3><span>Recent Tweets</span></h3>
   <ul>
    <li><a href="#">@laurakalbag</a> I will be very soon. Ase result reco endation <a href="#">31 minutes ago</a></li>
    <li><a href="#">@laurakalbag</a> you got chocolates!? That's i I'm signing up. <a href="#">37 minutes ago</a></li>
   </ul>
  </div>
  <!-- /recent tweets -->
  <!-- recent posts -->
  <div class="recent_posts">
   <h3><span>Recent Posts</span></h3>
   <ul>
    <li><a href="#">Lorem ipsum dolo amet consecect</a></li>
    <li><a href="#">Sed laoreet neque nonte mauris </a></li>
    <li><a href="#">Metus lacus, porta vestibulum</a></li>
    <li><a href="#">Morbi ac magna est ornare eliticits</a></li>
    <li><a href="#">Voluptas sadips nemis un etras</a></li>
   </ul>
  </div>
  <!-- /recent posts -->
  <!-- subscribe block -->
  <div class="subscribe_block">
   <h3><span>Stay Connected</span></h3>
   <form method="post" action="#">
    <p><input type="text" id="name" value="NAME ..." /></p>
    <p><input type="text" id="email" value="EMAIL ..." /></p>
    <p><input type="submit" value="Subscribe" /></p>
   </form>
  </div>
  <!-- /subscribe block -->
 </footer>
</div>

<!-- copyright -->
<div class="copyright">
 <div class="wraper">
  <p><span>Copyright 2012 Construct</span>All Rights Reserved<a href="#">RSS</a><a href="#">Comments</a></p>
  <a class="top" href="#">Back to the top</a>
 </div>
</div>
<!-- /copyright -->
<!-- /footer -->
</body>
</html> 
